/* components */
import { ConnectorModuleRuleForm, ConnectorModuleConnectorDialogDetailTypeRadio } from '@src/modules/connector/components'
/* model */
import { ConnectorModuleComponentNameEnum, ConnectorField } from '@src/modules/connector/model'
import { CardInputTypeEnum } from '@model/enum/CardEnum'
/* scss */
import '@src/modules/connector/components/card-item/index.scss'
import '@src/modules/connector/components/connector-dialog-detail/action.scss'
import '@src/modules/connector/components/connector-dialog-detail/action-create.scss'
/* vue */
// @ts-ignore
import { ComponentInstance, ComponentRenderProxy, computed, ComputedRef, defineComponent, PropType } from 'vue'
import { CommonComponentInstance } from '@model/VC'
import { CreateElement } from 'vue'
/* types */
import { ConnectorRuleFormItemType } from '@src/modules/connector/types'
/* util */
import { createConnectorRuleFormItem } from '@src/modules/connector/util'
import { t } from '@src/locales'

export type ConnectorModuleConnectorDialogDetailActionCreateProps = {
  inputTypeValue: CardInputTypeEnum;
  fromBizTypeName: string;
  toBizTypeName: string;
  toBizTypeId: string;
  validation: boolean;
}

export interface ConnectorModuleConnectorDialogDetailActionCreateSetupState {
  
}

export enum ConnectorModuleConnectorDialogDetailActionCreateEmitEventNameEnum {
  Input = 'input',
  InputTypeValue = 'inputTypeValueChange',
}

export type ConnectorModuleConnectorDialogDetailActionCreateInstance = ComponentInstance & ConnectorModuleConnectorDialogDetailActionCreateSetupState
export type ConnectorModuleConnectorDialogDetailActionCreateVM = ComponentRenderProxy<ConnectorModuleConnectorDialogDetailActionCreateProps> & CommonComponentInstance & ConnectorModuleConnectorDialogDetailActionCreateInstance

export default defineComponent({
  name: ConnectorModuleComponentNameEnum.ConnectorModuleConnectorDialogDetailActionCreate,
  emits: [
    ConnectorModuleConnectorDialogDetailActionCreateEmitEventNameEnum.Input,
    ConnectorModuleConnectorDialogDetailActionCreateEmitEventNameEnum.InputTypeValue,
  ],
  props: {
    inputTypeValue: {
      type: String as PropType<CardInputTypeEnum>,
      default: ''
    },
    toFieldList: {
      type: Array as PropType<ConnectorField[]>,
      default: () => ([])
    },
    fromFieldList: {
      type: Array as PropType<ConnectorField[]>,
      default: () => ([])
    },
    value: {
      type: Array as PropType<ConnectorRuleFormItemType[]>,
      default: () => ([])
    },
    showDetailType: {
      type:Boolean,
      default: true
    },
    fromBizTypeName: {
      type: String as PropType<string>,
      default: ''
    },
    toBizTypeName: {
      type: String as PropType<string>,
      default: ''
    },
    toBizTypeId: {
      type: String as PropType<string>,
      default: ''
    },
    showTitle:{
      type:Boolean,
      default: true
    },
    requiredShowDel:{
      type:Boolean,
      default: true
    },
    showText:{
      type:Boolean,
      default: false
    },
    isUpdate:{
      type:Boolean,
      default: false
    },
    validation: {
      type: Boolean,
      default: false
    },
    justFixedValue: {
      type: Boolean,
      default: false
    },
    isWiki: {
      type: Boolean,
      default: false
    }
  },
  setup(props) {
    
    const toFields: ComputedRef<ConnectorField[]> = computed(() => props.toFieldList)
    const fromFields: ComputedRef<ConnectorField[]> = computed(() => props.fromFieldList)
    
    return {
      toFields,
      fromFields
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.userNameStyleOverlapPolyfill()
    })
  },
  methods: {
    /** 
     * @description 添加查询条件
    */
    addRuleFormItem() {
      
      const newValue = [...this.value, createConnectorRuleFormItem()];
      if(this.justFixedValue)newValue.condition = 'fixedValue';
      this.onValueInputHandler(newValue)
      
    },
    onValueInputHandler(value: ConnectorRuleFormItemType[]) {
      this.$emit(ConnectorModuleConnectorDialogDetailActionCreateEmitEventNameEnum.Input, value)
    },
    onInputTypeValueChangeHandler(value: CardInputTypeEnum) {
      this.$emit(ConnectorModuleConnectorDialogDetailActionCreateEmitEventNameEnum.InputTypeValue, value)
    },
    /**
     * @description 用户名样式重叠补丁
     */
    userNameStyleOverlapPolyfill() {
      
      const userInputList: HTMLInputElement[] = (this.$el.querySelectorAll('.user-search input') || []) as unknown as HTMLInputElement[]
      
      userInputList.forEach(userInputElement => {
        if (userInputElement.value) {
          userInputElement.value = ''
          userInputElement.placeholder = ''
        }
      })
      
    }
  },
  render(h: CreateElement) {
    return (
      <div class={ConnectorModuleComponentNameEnum.ConnectorModuleConnectorDialogDetailActionCreate}>
        {
          this.showTitle &&
          <div class="connector-module-connector-dialog-detail-column-header">
            {t('common.connector.title.setNewRule')}
          </div>
        }
        
        { 
          this.showDetailType ? (
          <ConnectorModuleConnectorDialogDetailTypeRadio
            value={this.inputTypeValue}
            onInput={this.onInputTypeValueChangeHandler}
          />):(<br/>)
        }
        
        <ConnectorModuleRuleForm
          value={this.value}
          isSelect={false}
          toFieldList={this.toFields}
          fromFieldList={this.fromFields}
          fromBizTypeName={this.fromBizTypeName}
          toBizTypeName={this.toBizTypeName}
          toBizTypeId={this.toBizTypeId}
          isShowOperate={false}
          onInput={this.onValueInputHandler}
          requiredShowDel={this.requiredShowDel}
          showText={this.showText}
          isUpdate={this.isUpdate}
          validation={this.validation}
          justFixedValue={this.justFixedValue}
          isWiki={this.isWiki}
        />
        
        <div class="connector-module-connector-dialog-detail-action-query-add">
          <el-button 
            plain 
            type="primary"
            onClick={this.addRuleFormItem}
          >
            + {t('common.connector.buttons.addField')}
          </el-button>
        </div>
        
      </div>
    )
  }
})
